<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="jquery.mobile-1.3.1.min.css" />
  <script src="jquery-1.9.1.min.js"></script>
  <script src="jquery.mobile-1.3.1.min.js"></script>
  <script>
  $( document ).on( "pageinit", "#planning", function() {
    $( document ).on( "swipeleft", "#planning", function( e ) {        
        if ( e.type === "swipeleft"  ) {
                $.mobile.changePage( "#menu", { transition: "slide", reverse: true } );
        }
    });
});
  </script>
  <script>
  $(function () {
        $("#connect").click(function() {
            var name = $("#nameinput").val();
            $("#name").html(name);
        })            
    });
  </script>
  <script>
  
  </script>
  
  </head>
  <body>
  
  <!-- login page -->
  <div data-role="page" id="login">
     <div data-role="content">
        <div data-role="fieldcontain">
            <label for="nameinput">
                Identifiant
            </label>
            <input name="" id="nameinput" placeholder="Identifiant" value="" type="text">
        </div>
        <div data-role="fieldcontain">
            <label for="mdpinput">
                Mot de passe
            </label>
            <input name="" id="mdpinput" placeholder="Mot de passe" value="" type="password">
        </div>
        <a data-role="button" data-theme="b" href="#menu" id="connect">
            S'identifier
        </a>
    </div>
  </div>
  
  
  
  
  <!-- menu page -->
          <div data-role="page" id="menu">
    <div data-theme="b" data-role="header">
        <h3>
            Bienvenue <span id="name"></span>
        </h3>
    </div>
    <div data-role="content">
    <div data-role="collapsible-set">
            <div data-role="collapsible" data-theme="b" data-content-theme="c">
                <h3>
                    Recherche Cours
                </h3>
                <ul data-role="listview">
                    <li>
                        <a href="#searchmat" data-transition="slide">
                            Recherche par matière
                        </a>
                    </li>
                    <li>
                        <a href="#searchprof" data-transition="slide">
                            Recherche par professeur
                        </a>
                    </li>
                </ul>
            </div>
        
            <div data-role="collapsible" data-theme="a" data-content-theme="c">
                <h3>
                    Mon planning
                </h3>
                <ul data-role="listview">
                    <li>
                        <a href="#planning" data-transition="slide">
                            Cours en course
                        </a>
                    </li>
                    <li>
                        <a href="#cours" data-transition="slide">
                            Cours à venir
                        </a>
                    </li>
                </ul>
        </div>
        
            <div data-role="collapsible" data-theme="e" data-content-theme="c">
                <h3>
                    Resources
                </h3>
                <ul data-role="listview">
                  <li>
                        <a href="#history" data-transition="slide">
                            Historique
                        </a>
                    </li>
                    <li>
                        <a href="#online" data-transition="flip">
                            En ligne
                        </a>
                    </li>
                    <li>
                        <a href="#download" data-transition="slidedown">
                            Téléchargé
                        </a>
                    </li>
                    <li>
                        <a href="#fav" data-transition="turn">
                            Favoris
                        </a>
                    </li>
                </ul>
            </div>
        </div>    

    </div>
    
</div>

<!-- PAGE history -->
<div data-role="page" id="history">
	<div data-theme="b" data-role="header">
        <h3>History</h3>
        <a href="#menu" data-icon="grid" data-iconpos="notext" data-transition="flow" >Menu</a>
    </div>
	<div data-role="content">History TODO</div>
	<div data-role="footer">...</div>
</div>

<!-- PAGE En ligne -->
<div data-role="page" id="online">
	<div data-theme="b" data-role="header">
        <h3>En ligne</h3>
        <a href="#menu" data-icon="grid" data-iconpos="notext" data-transition="flip " >Menu</a>
    </div>
	<div data-role="content">En ligne TODO</div>
	<div data-role="footer">...</div>
</div>

<!-- PAGE Télécharger -->
<div data-role="page" id="download">
	<div data-theme="b" data-role="header">
        <h3>Télécharger</h3>
        <a href="#menu" data-icon="grid" data-iconpos="notext" data-transition="pop " >Menu</a>
    </div>
	<div data-role="content">Télécharger TODO</div>
	<div data-role="footer">...</div>
</div>

<!-- PAGE favoris -->
<div data-role="page" id="fav">
	<div data-theme="b" data-role="header">
        <h3>Favoris</h3>
        <a href="#menu" data-icon="grid" data-iconpos="notext" data-transition="turn" >Menu</a>
    </div>
	<div data-role="content">Favoris TODO</div>
	<div data-role="footer">...</div>
</div>



<div data-role="page" id="planning">
  <div data-role="header" data-theme="b" >
    <h1>Mon Planning</h1>
    <a href="#menu" data-icon="grid" data-iconpos="notext" data-direction="reverse">Menu</a>
  </div><!-- /header -->

  <div data-role="content">
    <p>I'm first in the source order so I'm shown as the page.</p>
    <p>Revenir au <a href="#menu">menu</a></p>
  </div><!-- /content -->

    <div data-theme="b" data-role="footer" data-position="fixed">
      <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="arrow-u">en cours</a></li>
          <li><a href="#" data-icon="arrow-d">download</a></li>
          <li><a href="#" data-icon="star">favoris</a></li>
          <li><a href="#" data-icon="gear">options</a></li>
        </ul>
      </div><!-- /navbar -->
    </div>
  </div>

<!-- /page rechercher par matière -->
  <div data-role="page" id="searchmat">
    <div data-theme="b" data-role="header">
        <h3>Liste de professeurs</h3>
        <a href="#menu" data-icon="grid" data-iconpos="notext" data-direction="reverse">Menu</a>
    </div>
    <div data-role="content" style="">
      <div data-role="fieldcontain">
        <ul data-role="listview" data-theme="c" data-inset="true" data-filter="true">
          <li><a href="#matgen">
            Général
            <span class="ui-li-count">1</span>
            </a></li>
          <li><a href="#">
            Aéronautique
            <span class="ui-li-count">8</span>
          </a></li>
          <li><a href="#">
            Méthologies
            <span class="ui-li-count">4</span>
          </a></li>
          <li><a href="#">
            Management
            <span class="ui-li-count">3</span>
          </a></li>
          <li><a href="#">
            Finance
            <span class="ui-li-count">2</span>
          </a></li>
        </ul>
      </div>
    </div>
    <div data-theme="b" data-role="footer" data-position="fixed">
      <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="arrow-u">en cours</a></li>
          <li><a href="#download" data-icon="arrow-d">download</a></li>
          <li><a href="#fav" data-icon="star">favoris</a></li>
          <li><a href="#" data-icon="gear">options</a></li>
        </ul>
      </div><!-- /navbar -->
    </div>
  </div>
  
  <!-- /page cours liste matière général -->
  <div data-role="page" id="matgen" class="matgen">
  <style>
    .matgen .video {position: relative; margin: 0px !important; display: block; float: right; width: 30px; height: 24px; background: url(img/video-icon.png) 0 0 no-repeat; background-size: 24px 24px; }
    .matgen .audio {position: relative; margin: 0px !important; display: block; float: right; width: 30px; height: 24px; background: url(img/audio-icon.png) 0 0 no-repeat; background-size: 24px 24px; }
  </style>
    <div data-theme="b" data-role="header">
        <h3>Liste de professeurs</h3>
        <a href="#menu" data-icon="grid" data-iconpos="notext" data-direction="reverse">Menu</a>
    </div>
    <div data-role="content" style="">
      <div data-role="fieldcontain">
        <ul data-role="listview" data-theme="c" data-inset="true" data-filter="true">
          <li><a href="ipca.html" rel="external">
          Industrial Process Control Assessment Plus (IPCA+)
          <p class=" video" title="vidéo"></p>
          <p class=" audio" title="audio"></p>
          </a></li>
        </ul>
      </div>
    </div>
    <div data-theme="b" data-role="footer" data-position="fixed">
      <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="arrow-u">en cours</a></li>
          <li><a href="#download" data-icon="arrow-d">download</a></li>
          <li><a href="#fav" data-icon="star">favoris</a></li>
          <li><a href="#" data-icon="gear">options</a></li>
        </ul>
      </div><!-- /navbar -->
    </div>
  </div>



<!-- /page rechercher par prof -->
  <div data-role="page" id="searchprof">
    <div data-theme="b" data-role="header">
        <h3>Liste de professeurs</h3>
        <a href="#menu" data-icon="grid" data-iconpos="notext" data-direction="reverse">Menu</a>
    </div>
    <div data-role="content" style="">
      <div data-role="fieldcontain">
        <ul data-role="listview" data-theme="c" data-inset="true" data-filter="true">
          <li><a href="#cours">
            <img style="" src="img/t-jean-francois-barrand.jpg">
            Jean-François Barrand
            <span class="ui-li-count">12</span>
            </a></li>
          <li><a href="#">
            <img style="" src="img/t-nicolas-cedras.jpg">
            Nicolas Cedras
            <span class="ui-li-count">42</span>
          </a></li>
          <li><a href="#">
            <img style="" src="img/t-brian-chaloner.jpg">
            Brian Chaloner
            <span class="ui-li-count">8</span>
          </a></li>
          <li><a href="#">
            <img style="" src="img/t-pascale-charabouska.jpg">
            Pascale Charabouska
            <span class="ui-li-count">3</span>
          </a></li>
          <li><a href="#">
            <img style="" src="img/t-paul-conway.jpg">
            Paul Conway
            <span class="ui-li-count">22</span>
          </a></li>
          <li><a href="#">
            <img style="" src="img/t-bruce-cooper.jpg">
            Bruce Cooper
            <span class="ui-li-count">21</span>
          </a></li>
            
        </ul>
      </div>
    </div>
    <div data-theme="b" data-role="footer" data-position="fixed">
      <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="arrow-u">en cours</a></li>
          <li><a href="#download" data-icon="arrow-d">download</a></li>
          <li><a href="#fav" data-icon="star">favoris</a></li>
          <li><a href="#" data-icon="gear">options</a></li>
        </ul>
      </div><!-- /navbar -->
    </div>
  </div>
  
  
<!-- /page cours liste -->
  <div data-role="page" id="cours">
    <div data-theme="b" data-role="header">
        <h3>Liste de cours</h3>
        <a href="#menu" data-icon="grid" data-iconpos="notext" data-direction="reverse">Menu</a>
    </div>
    <style>
    .courstype .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
    #video .ui-icon { background: url(img/Movies-icon.png) 0 0 no-repeat; background-size: 24px 24px; }
    #document .ui-icon { background: url(img/Documents-icon.png) 0 0 no-repeat; background-size: 24px 24px; }
    #download .ui-icon { background: url(img/Download-icon.png) 0 0 no-repeat; background-size: 24px 24px; }
    </style>
    <div data-role="content" style="">
    <div class="courstype" data-role="navbar" data-theme="b">
        <ul>
          <li><a href="#" id="video" data-icon="custom">Video</a></li>
          <li><a href="#" id="document" data-icon="custom">Document</a></li>
          <li><a href="#" id="download" data-icon="custom">Download</a></li>
        </ul>
    </div><!-- /navbar -->
      <div data-role="fieldcontain">
        <video width="360" height="240" controls="controls">
          <source src="mobile_video.mp4" type="video/mp4" preload="auto"/>
          Your browser does not support the video tag.
        </video>
      </div><!-- /fieldcontain -->
      <div data-role="fieldcontain">
        <embed width="360" height="240" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash">
        </embed>
      </div><!-- /fieldcontain -->
    </div>
    <div data-theme="b" data-role="footer" data-position="fixed">
      <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="arrow-u">en cours</a></li>
          <li><a href="#" data-icon="arrow-d">download</a></li>
          <li><a href="#" data-icon="star">favoris</a></li>
          <li><a href="#" data-icon="gear">options</a></li>
        </ul>
      </div><!-- /navbar -->
    </div>
  </div>
 
<div data-role="page" id="coursTodo">
	<div data-role="panel">
		<a href="#menu"></a> <!-- panel content goes here -->
	</div><!-- /panel -->
	<!-- header -->
	<div data-theme="b" data-role="header">
        <h3>Liste de cours</h3>
        <a href="#menu" data-icon="grid" data-iconpos="notext" data-direction="reverse">Menu</a>
    </div>
	<!-- content -->
	<div data-role="content">Content Cours à venir</div>
	<!-- footer -->
	<div data-role="footer">...</div>

</div><!-- page -->


  </body>
</html>
